<template>
  <view class="container">
    <view class="activity">
      <!-- 发表成功 -->
      <view v-if="publishShow" class="publishBox">
        <h1>+1</h1>
        <text>发表成功</text>
      </view>
      <!-- 图片 -->
      <view class="activityBox_image">
        <image :src="activityList.coverImage" mode="aspectFill"></image>
        <view v-if="activityList.status==1" class="label finish">
          待发布
        </view>
        <view v-if="activityList.status==2" class="label proceed">
          进行中
        </view>
        <view v-if="activityList.status==3" class="label proceed">
          派奖中
        </view>
        <view v-else-if="activityList.status==5" class="label finish">
          已结束
        </view>
      </view>

      <view class="activityBox">
        <view class="activityBox_top">
          <view class="activityBox_top_title">
            <view class="activityBox_top_title_left">
              <h1>#{{activityList.title? activityList.title:'未知'}}</h1>
              <text>{{residueTime}} ｜ {{activityList.joiners?activityList.joiners:'暂时没'}}人参与</text>
            </view>
            <view class="activityBox_top_title_right" @click="shareShow = true">
              <image src="/static/share.png" mode="aspectFill"></image>
              <text>分享</text>
            </view>
          </view>
        </view>
        <view class="activityBox_center">
          <circleLabel :activityList="activityList"></circleLabel>
        </view>

        <view class="activityBox_bottom">
          <van-tabs :active="active" @change="TabChange">
            <van-tab title="全部">
              <view class="tab_padding">
                <block v-for="(item,i) in allList" :key="i">
                  <userIntroduced :conditionItem="item" :activityListId="activityList.id" @onfollowed="onfollowed"
                    @onlikeShow="onlikeShow"></userIntroduced>
                </block>
              </view>
            </van-tab>
            <van-tab title="活动详情">
              <view class="tab_padding">
                <rich-text v-if="activityList.detail" :nodes="activityList.detail"></rich-text>
              </view>
            </van-tab>
            <van-tab title="活动规则">
              <view class="tab_padding">
                <rich-text v-if="activityList.useRules" :nodes="activityList.useRules"></rich-text>
              </view>
            </van-tab>
            <van-tab title="中选排行">
              <!-- 第一个标签 -->
              <view class="tab_padding">
                <view class="presentBox" v-if="isLogin && taskbutton && !UserList">
                  <view class="presentBox_title">
                    我的当前排名
                  </view>
                  <view class="presentBox_list">
                    <view class="presentBox_list_left">
                      <text
                        class="red">{{UserList.ranking < 10 ? '0':''}}{{UserList.ranking?UserList.ranking + '.':''}}</text>
                      <image :src="UserList.avatar" mode="aspectFill"></image>
                      <h1>{{UserList.nickname?UserList.nickname:''}}</h1>
                    </view>
                    <view class="presentBox_list_right red">
                      {{UserList.score?UserList.score:''}}
                    </view>
                  </view>
                </view>
                <!-- 第二个 -->
                <view class="allBox" v-if="rankingList.length != 0">
                  <view class="presentBox_title">
                    全部排名
                  </view>
                  <!-- 列表 -->
                  <view class="presentBox_list" v-for="(item,i) in rankingList" :key="i">
                    <view class="presentBox_list_left">
                      <text>{{i<10?'0':''}}{{i<10?i+1:i+1}}.</text>
                      <image :src="item.avatar" mode="aspectFill"></image>
                      <h1>{{item.nickname}}</h1>
                    </view>
                    <view class="presentBox_list_right">
                      {{item.score}}
                    </view>
                  </view>
                </view>
              </view>
            </van-tab>
            <van-tab title="最新参与">
              <view class="tab_padding tab_padding1">
                <view class="tab_padding_box" v-for="(item,index) in joinersList" :key="index"
                  @click="navTo('/subpkg/userInfo/userInfo?id=' + item.id)">
                  <image :src="item.avatar" mode="aspectFill"></image>
                  <text class="nickname">{{item.name}}</text>
                </view>
              </view>
            </van-tab>
          </van-tabs>
        </view>
        <!-- 加 -->
        <userSuspension v-if="suspendShow" :remarkShow="false" :circleId="activityList.categoryId"
          :circleName="activityList.categoryName" :activityListId="activityList.id"></userSuspension>
        <!-- 悬浮 -->
        <view class="suspend">
          <text class="text" @click="textClickdynamic(0)">{{activityList.remark}}</text>
          <button v-if="taskbutton" :disabled="activityList.status >= 3? true:false"
            :class="activityList.status >= 3?'award':'participation'" @click="getTaskList(activityList.id)">
            发动态分享
          </button>
          <button v-else class="participation" @click="addActivityButton(activityList.id)">
            去参与活动
          </button>
        </view>
      </view>
      <!-- 去完成任务 -->
      <van-popup :show="taskShow" @close="taskClose" overlay-style="opacity:.2" round closeable
        close-icon-position="top-left" position="bottom" custom-style="height: 90%">
        <view class="taskBox">
          <view class="taskBox_title">
            <view class="taskBox_title_task">
              提升人气
            </view>
            <view class="taskBox_title_detail" @click="heatButton(activityList.id)">
              热度明细
            </view>
          </view>
          <scroll-view scroll-y style="height: 1000rpx;">
            <view class="taskBox_content">
              <!-- 列表 -->
              <view class="taskBox_content_item" v-for="(item,i) in taskList" :key="i">
                <view class="taskBox_content_item_left">
                  <view class="item_left_title">
                    <h1>{{item.taskName}}</h1>
                    <text v-if="item.total!='-1'">{{item.current}}/{{item.total}}</text>
                  </view>
                  <view class="item_left_text">
                    <!-- 在本活动下发布一个动态/文章 <text class="red">+5</text> 热度 -->
                    <view>{{item.taskRemark[0]}}<text v-if="item.taskRemark[1]" class="red"
                        style="margin: 0 10rpx;">{{item.taskRemark[1]}}</text><text
                        v-if="item.taskRemark[2]">{{item.taskRemark[2]}}</text>
                    </view>
                  </view>
                </view>
                <view class="taskBox_content_item_left">
                  <!-- item.total!='-1' -->
                  <button v-if="item.taskType == 0" class="taskBox_content_item_right" @click="textClickdynamic(0)">
                    去发布
                  </button>
                  <button v-if="item.taskType == 1" class="taskBox_content_item_right" @click="textClickdynamic(1)">
                    去发布
                  </button>
                  <button v-if="item.taskType == 2" class="taskBox_content_item_right" @click="textClickdynamic(2)">
                    去发布
                  </button>
                  <!-- item.taskType == 1 || item.taskType == 2 -->
                  <button v-if="item.taskType == 4 || item.taskType == 5 ||item.taskType == 6"
                    class="taskBox_content_item_right" type="default" open-type="share">去邀请</button>

                  <button v-if="item.taskType == 7" class="taskBox_content_item_right" @click="navTo(item.link)">
                    去完善
                  </button>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
      </van-popup>
      <!-- 热度明细 -->
      <van-popup :show="detailShow" @close="heatClose" overlay-style="opacity:.2" round closeable
        close-icon-position="top-left" position="bottom" custom-style="height: 90%">
        <view class="detailBox">
          <view class="detailBox_title">
            热度明细
          </view>
          <scroll-view scroll-y="true" style="height: 1200rpx;">
            <view class="detailBox_content">
              <!-- 列表 -->
              <view class="detailBox_content_item" v-for="(item,i) in heatList" :key="i">
                <view class="detailBox_content_item_left">
                  <view class="item_left_title">
                    <h1>{{item.remark}}</h1>
                  </view>
                  <view class="item_left_text">
                    <view>{{item.createTime}}</view>
                  </view>
                </view>
                <view class="detailBox_content_item_right">
                  <text class="red">+{{item.favourable}}</text><text class="t">热度</text>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
      </van-popup>

      <!-- 恭喜你获得 -->
      <view v-if="congratulationShow" class="congratulationBox">
        <image class="congratulationBox_image" src="http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210630/44a6cc2fbc71bd7dd65c03ac6426f8e8.png" mode="aspectFill">
        </image>
        <view class="shade">
          <view class="congratulationBox_content">
            <view class="congratulationBox_content_top">
              <h1>恭喜您获得</h1>
            </view>
            <view class="congratulationBox_content_center">
              <view class="congratulationBox_content_center_title">
                [
                <view class="text">
                  第<text class="a">{{activityList.ranking}}</text>名
                </view>
                ]
              </view>
              <image src="/static/images/circle-activities/jiangli.png" mode="aspectFill"></image>
              <text>{{congratulationList.remark}}</text>
            </view>
            <view class="congratulationBox_content_bottom">
              <view class="bottom" @click="congratulationShow = false">
                开心收下
              </view>
              <text>奖励可在奖励池中使用</text>
            </view>
          </view>
        </view>
      </view>
      <!-- 好可惜 -->
      <view v-if="unfortunatelyShow" class="unfortunatelyBox">
        <view class="unfortunatelyBox_content">
          <view class="unfortunatelyBox_content_top">
            <h1>好可惜，您只获得了</h1>
          </view>
          <view class="unfortunatelyBox_content_center">
            <view class="unfortunatelyBox_content_center_title">
              [
              <view class="text">
                第<text class="a">{{activityList.ranking}}</text>名
              </view>
              ]
            </view>
            <image src="/static/images/mine/gerenno.png" mode="widthFix"></image>
            <text>什么也没有～下次继续努力</text>
          </view>
          <view class="unfortunatelyBox_content_bottom">
            <view class="bottom" @click="unfortunatelyShow = false">
              继续加油
            </view>
          </view>
        </view>
      </view>
      <!-- 分享 -->
      <van-popup :show="shareShow" round position="bottom" custom-style="height: 25%" @close="shareShowClose">
        <view class="share_Input">
          <button type="default" open-type="share">
            <image src="/static/images/weixin.png" mode="aspectFill"></image>
            <text>发送给好友</text>
          </button>
          <button type="default" @click="oncircleShow">
            <image src="/static/images/pyquan.png" mode="aspectFill"></image>
            <text>分享到朋友圈</text>
          </button>
        </view>
      </van-popup>

      <view class="circleType">
        <van-popup :show="circleShow" custom-style="height: 10%;width : 40%" @close="circleShowClose">
          <view class="share_Input">
            点击右上角选择可分享朋友圈
          </view>
          <view class="minImage"></view>
        </van-popup>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapActions,
    mapGetters,
    mapMutations
  } from 'vuex'

  import circleLabel from '@/components/circle_label/circle_label.vue'
  import userSuspension from '@/components/user_suspension/user_suspension.vue'
  import userIntroduced from '@/components/user_introduced/user_introduced.vue'

  import {
    getActivityParticulars,
    getTask,
    getheat,
    page,
    ActivityRanking,
    getawardList,
    getCoupon,
    getJoinersList
  } from '@/api/activity_particulars.js'
  import {
    behaviorJoiner
  } from "@/api/community.js"

  export default {
    data() {
      return {
        current: 1,
        total: 0,

        curTab: 0,

        // 排行页数
        Rankingcurrent: 1,
        // 全部页数
        Allcurrent: 1,
        // 悬浮球
        suspendShow: true,
        // 分享
        shareShow: false,
        // 朋友圈
        circleShow: false,
        // 时间
        residueTime: '',
        // 到期时间
        expireTime: '',
        allList: [],
        // 任务按钮
        taskbutton: false,
        // 任务弹出框
        taskShow: false,
        // 热度明细
        detailShow: false,
        // 门票详情
        ticketsShow: false,
        // 恭喜静态页
        congratulationShow: false,
        // 可惜静态页
        unfortunatelyShow: false,
        // 过期
        dueShow: true,

        // 发表成功
        publishShow: false,
        // tab栏
        active: 1,
        // 进行
        label: true,
        // 活动详情列表
        activityList: [],
        // 任务列表
        taskList: [],
        // 任务明细列表
        heatList: [],
        // 排行列表
        rankingList: [],
        UserList: [],
        // 奖励池列表
        awardList: [],
        // 奖励详情
        awardDetailsList: [],
        // 恭喜列表
        congratulationList: [],
        // 发布或邀请
        issue_Invitation1: false,
        // 活动id
        aId: '',
        //参与者列表
        joinersList: []
      }
    },
    components: {
      circleLabel,
      userSuspension,
      userIntroduced
    },
    computed: {
      ...mapGetters('m_user', ['isLogin', 'userInfo'])
    },
    // #ifdef MP
    //发送给朋友
    onShareAppMessage: function() {
      var that = this;
      uni.report('onShareTimeline', '分享好友');
      return {
        title: this.activityList.title,
        imageUrl: this.activityList.coverImage,
        path: '/subpkg/activity_particulars/activity_particulars?id=' + this.activityList.id
      };
    },
    //分享到朋友圈
    onShareTimeline: function() {
      uni.report('onShareTimeline', '分享朋友圈');
      return {
        title: this.activityList.title,
        imageUrl: this.activityList.coverImage,
        path: '/subpkg/activity_particulars/activity_particulars?id=' + this.activityList.id
      };
    },
    // #endif
    onLoad: function(option) {
      this.aId = option.id;
      // 活动详情
      this.getActivityList(option.id)

      // 获取全部
      this.getAllList(option.id)

      // 获取排行
      this.getActivityRanking(option.id)
      // 展开
      this.getJoiners(option.id);
    },
    onReachBottom(e) {
      const that = this

      if (this.current * 20 >= this.total) {
        return
        //   return this.$util.Tips({
        //   title: '数据加载完毕！'
        // })
      }
      if (that.curTab == 0) {
        that.current += 1
        that.getAllList(that.activityList.id)
      } else if (that.curTab == 3) {
        that.current += 1
        that.getActivityRanking(that.activityList.id)
      } else if (that.curTab == 5) {
        that.current += 1
        that.heatButton(that.activityList.id)
      }
    },
    computed: {
      ...mapGetters('m_user', ['isLogin'])
    },
    methods: {
      navTo(url) {
        uni.navigateTo({
          url: url
        })
      },
      // 获取活动详情
      getActivityList(id) {
        getActivityParticulars(id).then(res => {
          this.taskbutton = res.data.isJoined
          this.suspendShow = true
          if (res.data.validDate) {
            res.data.validDate = res.data.validDate.split(',')
          }
          if (res.data.favourable) {
            res.data.favourable = res.data.favourable.split('\n')
          }
          // 时间剩余
          var time = res.data.validDate[1]
          var repTime = time.replace(/-/g, '/');
          var timeTamp = Date.parse(repTime);
          if (timeTamp - new Date().getTime() <= 0) {
            this.residueTime = '已结束'
          } else {
            this.residueTime = this.formatDuring(timeTamp - new Date().getTime()) + '后结束'
          }
          console.log(this.residueTime)
          if (res.data.meRewards.length != 0) {
            this.congratulationList = res.data.meRewards[0]
          }
          // 判断获奖
          if (this.isLogin && this.taskbutton && res.data.status == 3) {
            // console.log(123)
            if (this.congratulationList && this.congratulationList.length > 0) {
              this.congratulationShow = true
              this.suspendShow = false
            } else {
              this.unfortunatelyShow = true
              this.suspendShow = false
            }
          }
          this.activityList = res.data
        })
      },
      // 热度明细关闭
      heatClose() {
        this.detailShow = false
        this.heatList = []
      },
      // 任务关闭
      taskClose() {
        this.taskShow = false
        this.suspendShow = true
      },
      shareShowClose() {
        this.shareShow = false
      },
      circleShowClose() {
        this.circleShow = false
      },
      // 朋友圈
      oncircleShow() {
        this.shareShow = false
        this.circleShow = true
      },
      // 时间天数
      formatDuring(mss) {
        var days = parseInt(mss / (1000 * 60 * 60 * 24));
        var hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = (mss % (1000 * 60)) / 1000;
        if (days) {
          return days + "天"
        } else if (hours) {
          return hours + "小时"
        } else {
          return minutes + "分钟"
        }
      },
      onfollowed(res, type) {
        this.allList.forEach((item) => {
          if (item.createUser === res.createUser) {
            item.followed = !res.followed;
          }
        });
      },
      onlikeShow(res, type) {
        this.allList.forEach((item) => {
          if (item.id === res.id) {
            item.isLiked = !res.isLiked
            if (item.isLiked) {
              item.likes += 1
            } else {
              if (item.likes > 0) {
                item.likes -= 1
              }
            }
          }
        });
      },
      // 加入活动
      addActivityButton(id) {
        uni.report('addActivityBtn', '参加活动');
        behaviorJoiner(id, 2).then(res => {
          this.taskbutton = true
          this.$util.Tips({
            title: '参加成功！'
          })
        }).catch(err => {
          this.$util.Tips({
            title: err
          });
        });

      },
      // 任务列表
      getTaskList(id) {
        uni.report('getTaskList', '去分享活动任务');
        this.taskShow = true
        this.suspendShow = false
        getTask(id).then(res => {
          res.data.forEach(item => {
            item.taskRemark = item.taskRemark.split(' ')
          })
          this.taskList = res.data
        })
      },
      // 参与者列表
      getJoiners(activityId) {
        uni.report('getJoiners', '查看参与者列表');

        getJoinersList(activityId).then(res => {
          console.log("查看参与者列表");
          this.joinersList = res.data
        })
      },
      // 任务明细
      heatButton(activityId) {
        this.curTab = 5
        this.detailShow = true
        let TaskQuery = {
          activityId: activityId,
          current: this.current,
          size: 20
        }
        getheat(TaskQuery).then(res => {
          this.heatList = [...this.heatList, ...res.data.records]
          this.total = res.data.total
          console.log(this.heatList)
        })

      },
      // 获取全部
      getAllList(id) {
        let AllQuery = {
          current: this.current,
          size: 20,
          articleType: -1,
          activityId: id,
        }

        page(AllQuery).then(res => {
          res.data.records.forEach(item => {
            if (item.sliderImgs) {
              item.sliderImgs = item.sliderImgs.split(',')
            }
          })

          this.allList = [...this.allList, ...res.data.records]
          this.total = res.data.total
        })
      },
      // 活动排行
      getActivityRanking(id) {
        var RankingQuery = {
          activityId: id,
          current: this.current,
          size: 20,
        }
        ActivityRanking(RankingQuery).then(res => {
          this.UserList = res.data.currentUser
          this.rankingList = [...this.rankingList, ...res.data.rankingList.records]
          this.total = res.data.rankingList.total
        })
      },
      TabChange(e) {
        this.curTab = e.detail.index

        this.current = 1
        this.allList = []
        this.rankingList = []

        const that = this
        if (that.curTab == 0) {
          that.getAllList(that.activityList.id)
        } else if (that.curTab == 3) {
          that.getActivityRanking(that.activityList.id)
        } else if (that.curTab == 4) {
          that.getJoiners(that.activityList.id);
        }
      },
      // 奖励详情
      awardDetails(id) {
        this.ticketsShow = true
        getCoupon(id).then(res => {
          this.awardDetailsList = res.data
        })
      },
      textClickdynamic(i) {
        if (this.isLogin) {
          if (i == 0) {
            uni.navigateTo({
              url: '/subpkg/new_dynamic/new_dynamic?circleId=' + this.activityList.categoryId +
                '&circleName=' + this
                .activityList.categoryName + '&activityListId=' + this.activityList.id
            })
          } else if (i == 1) {
            uni.navigateTo({
              url: '/subpkg/new_article/new_article?circleId=' + this.activityList.categoryId +
                '&circleName=' + this
                .activityList.categoryName + '&activityListId=' + this.activityList.id
            })
          } else if (i == 2) {
            this.taskShow = false
          }
        } else {
          this.$util.Tips({
            title: '请先登录'
          });
        }
      }
    },
  }
</script>

<style lang="scss">
  .activity {
    // background-color: rgba(247, 247, 247, 1);
  }



  .activityBox_image {
    width: 100%;
    height: 402rpx;
    position: relative;

    .label {
      position: absolute;
      right: 30rpx;
      bottom: 32rpx;
      width: 110rpx;
      height: 52rpx;
      border-radius: 5px;
      line-height: 52rpx;
      text-align: center;
      font-size: 26rpx;
      color: rgba(255, 255, 255, 1);
    }

    .proceed {
      background-color: rgba(255, 87, 51, 1);
      box-shadow: 0px 2px 4px rgba(255, 87, 51, 0.22);
    }

    .finish {
      background-color: rgba(61, 61, 61, 0.25);
    }

    image {
      width: 100%;
      height: 100%;
      background-color: #f3f3f3;
    }
  }

  .red {
    color: rgba(255, 87, 51, 1) !important;
  }

  // 展开样式
  .textFour_box {
    width: 100%;
    font-size: 28rpx;
    font-weight: 400;
    color: rgba(61, 61, 61, 0.75);
    line-height: 26px;
    text-align: justify;
  }

  .text_toggloe_box {
    display: -webkit-box;
    display: -webkit-flex;
    flex-direction: row;
    align-items: center;
    margin: 10rpx 0;
  }

  .text_toggle_text {
    font-size: 24rpx;
    color: rgba(61, 61, 61, .5);
    line-height: 32rpx;
    margin-right: 10rpx;
  }

  .three {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  /deep/.uni-scroll-view ::-webkit-scrollbar {
    /* 隐藏滚动条，但依旧具备可以滚动的功能 */
    display: none;
    width: 0;
    height: 0;
    color: transparent;
    background: transparent;
  }

  /deep/::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    color: transparent;
    background: transparent;
  }

  .publishBox {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 170rpx;
    height: 170rpx;
    background-color: rgba(0, 0, 0, 1);
    border-radius: 10rpx;
    text-align: center;

    h1 {
      margin-top: 25rpx;
      font-size: 48rpx;
      color: rgba(255, 255, 255, 1);
    }

    text {
      font-size: 24rpx;
      color: rgba(255, 255, 255, 1);
    }
  }

  .tab_padding {
    padding: 30rpx 24rpx 0;
  }

  .taskBox {
    padding: 0 30rpx;

    .taskBox_title {
      display: flex;
      margin-bottom: 120rpx;

      .taskBox_title_task {
        position: absolute;
        left: 50%;
        top: 40rpx;
        transform: translate(-50%);
        font-size: 30rpx;
        color: rgba(61, 61, 61, 1);
      }

      .taskBox_title_detail {
        position: absolute;
        right: 30rpx;
        top: 40rpx;
        font-size: 28rpx;
        color: rgba(61, 61, 61, 1);
      }
    }

    .taskBox_content {
      padding-bottom: 80rpx;

      .taskBox_content_item:nth-child(1) {
        padding-top: 0;
      }

      .taskBox_content_item:last-child {
        border-bottom: none;
      }

      .taskBox_content_item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 40rpx 0;
        border-bottom: 1rpx solid rgba(241, 241, 241, 1);

        .taskBox_content_item_left {
          .item_left_title {
            display: flex;
            align-items: center;
            margin-bottom: 20rpx;

            h1 {
              font-size: 28rpx;
              color: rgba(61, 61, 61, 1);
            }

            text {
              font-size: 24rpx;
              color: rgba(61, 61, 61, .5);
              margin-left: 15rpx;
            }
          }

          .item_left_text {
            view {
              font-size: 24rpx;
              color: rgba(158, 158, 158, 1);
            }
          }
        }

        .taskBox_content_item_right {
          width: 142rpx;
          height: 52rpx;
          background-color: rgba(253, 211, 56, 1);
          border-radius: 26.5rpx;
          text-align: center;
          line-height: 52rpx;
          color: rgba(51, 51, 51, 1);
          font-size: 26rpx;
          margin: 0;
          padding: 0;
        }
      }
    }
  }

  .detailBox {
    padding: 0 30rpx;

    .detailBox_title {
      display: flex;
      justify-content: center;
      margin-top: 40rpx;
      font-size: 30rpx;
      color: rgba(61, 61, 61, 1);
      margin-bottom: 40rpx;
    }

    .detailBox_content {
      padding-bottom: 80rpx;

      .detailBox_content_item:nth-child(1) {
        padding-top: 0;
      }

      .detailBox_content_item:last-child {
        border-bottom: none;
      }

      .detailBox_content_item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 40rpx 0;
        border-bottom: 1rpx solid rgba(241, 241, 241, 1);

        .detailBox_content_item_left {
          .item_left_title {
            display: flex;
            align-items: center;
            margin-bottom: 20rpx;

            h1 {
              font-size: 28rpx;
              color: rgba(61, 61, 61, 1);
            }
          }

          .item_left_text {
            view {
              font-size: 24rpx;
              color: rgba(158, 158, 158, 1);
            }
          }
        }

        .detailBox_content_item_right {
          color: rgba(158, 158, 158, 1);
          font-size: 24rpx;

          .t {
            margin-left: 10rpx;
          }
        }
      }
    }
  }

  .ticketsBox {
    padding: 0 30rpx;

    .color {
      color: rgba(61, 61, 61, .5) !important;
    }

    .ticketsBox_title {
      display: flex;
      justify-content: center;
      margin-top: 40rpx;
      font-size: 30rpx;
      color: rgba(61, 61, 61, 1);
      margin-bottom: 40rpx;
    }

    .ticketsBox_image {
      width: 488rpx;
      height: 250rpx;
      position: absolute;
      left: 40rpx;
      top: -30rpx;
    }

    .ticketsBox_content {
      position: absolute;
      top: 180rpx;
      left: 50%;
      transform: translate(-50%);
      width: 690rpx;
      height: 1035rpx;
      padding: 0 40rpx;
      padding-bottom: 200rpx;
      box-sizing: border-box;
      border: 2rpx solid rgba(0, 0, 0, 0.15);
      background-color: #fff;
      border-radius: 20rpx;

      .ticketsBox_content_top {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 20rpx;
        margin-top: 70rpx;
        margin-bottom: 20rpx;
        box-sizing: border-box;

        image {
          width: 279rpx;
          height: 279rpx;
        }

        h1 {
          font-size: 30rpx;
          color: rgba(61, 61, 61, 1);
          margin-top: 40rpx;
          text-align: center;
        }

        text {
          height: 279rpx;
          line-height: 297rpx;
          color: rgba(61, 61, 61, .5);
          font-size: 36rpx;
        }
      }

      .ticketsBox_content_bottom {
        .ticketsBox_content_bottom_item {
          margin: 40rpx 0;

          .item_top {
            display: flex;
            align-items: center;
            margin-bottom: 20rpx;

            image {
              width: 16rpx;
              height: 16rpx;
              margin-right: 15rpx;
            }

            h1 {
              font-size: 30rpx;
              color: rgba(61, 61, 61, 1);
            }
          }

          .item_bottom {
            color: rgba(61, 61, 61, 1);
            font-size: 24rpx;
            margin-left: 30rpx;
          }

          .item_bottom_finally {
            text {
              display: flex;
              flex-direction: column;
              line-height: 1.5;
              margin: 20rpx 0;
            }
          }
        }
      }
    }
  }

  .congratulationBox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    z-index: 5;

    .congratulationBox_image {
      position: absolute;
      left: 56%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 110%;
      height: 75%;
    }

    .shade {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 490rpx;
      height: 584rpx;
      border-radius: 30rpx;
      background-color: rgba(253, 211, 56, 1);
    }

    .congratulationBox_content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 490rpx;
      height: 584rpx;
      border-radius: 60rpx;
      background-color: rgba(255, 255, 255, 1);
      text-align: center;

      .congratulationBox_content_top {
        margin-top: 50rpx;

        h1 {
          font-size: 30rpx;
          color: rgba(61, 61, 61, 1);
        }
      }

      .congratulationBox_content_center {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 60rpx;
        margin-bottom: 20rpx 0;

        image {
          width: 270rpx;
          height: 95rpx;
          margin-bottom: 20rpx;
          margin-right: 30rpx;
        }

        text {
          font-size: 20rpx;
          color: rgba(61, 61, 61, 1);
          line-height: 1.5;
        }

        .congratulationBox_content_center_title {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 60rpx;
          font-weight: 100;
          color: rgba(61, 61, 61, 0.2);
          margin: 35rpx 0;

          .text {
            display: flex;
            align-items: center;
            font-size: 24rpx;
            color: rgba(61, 61, 61, 0.5);
            margin: 0 20rpx;

            .a {
              color: rgba(255, 87, 51, 1);
              font-size: 88rpx;
              margin: 0 20rpx;
              font-weight: 600;
            }
          }
        }
      }

      .congratulationBox_content_bottom {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .bottom {
          width: 311rpx;
          height: 74rpx;
          background-color: rgba(253, 211, 56, 1);
          border-radius: 37rpx;
          text-align: center;
          line-height: 74rpx;
          font-size: 26rpx;
          font-weight: 600;
          color: rgba(61, 61, 61, 1);
          margin: 25rpx 0;
        }

        text {
          font-size: 20rpx;
          color: rgba(61, 61, 61, 0.5);
        }
      }
    }
  }

  .unfortunatelyBox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    z-index: 5;

    .unfortunatelyBox_content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 490rpx;
      height: 584rpx;
      border-radius: 60rpx;
      background-color: rgba(255, 255, 255, 1);
      text-align: center;

      .unfortunatelyBox_content_top {
        margin-top: 50rpx;

        h1 {
          font-size: 30rpx;
          color: rgba(61, 61, 61, 1);
        }
      }

      .unfortunatelyBox_content_center {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 60rpx;
        margin-bottom: 20rpx 0;

        image {
          width: 270rpx;
          height: 95rpx;
          margin-bottom: 20rpx;
        }

        text {
          font-size: 20rpx;
          color: rgba(61, 61, 61, 1);
          line-height: 1.5;
        }

        .unfortunatelyBox_content_center_title {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 60rpx;
          font-weight: 100;
          color: rgba(61, 61, 61, 0.2);

          .text {
            display: flex;
            align-items: center;
            font-size: 24rpx;
            color: rgba(61, 61, 61, 0.5);
            margin: 0 20rpx;

            .a {
              color: rgba(61, 61, 61, 1);
              font-size: 88rpx;
              margin: 0 20rpx;
              font-weight: 600;
            }
          }
        }
      }

      .unfortunatelyBox_content_bottom {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .bottom {
          width: 311rpx;
          height: 74rpx;
          background-color: rgba(253, 211, 56, 1);
          border-radius: 37rpx;
          text-align: center;
          line-height: 74rpx;
          font-size: 26rpx;
          font-weight: 600;
          color: rgba(61, 61, 61, 1);
          margin: 25rpx 0;
        }
      }
    }

  }

  .activityBox {
    padding-bottom: 160rpx;

    .activityBox_top {
      background-color: #fff;
      padding: 0 30rpx;

      .activityBox_top_title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 0;

        .activityBox_top_title_left {
          h1 {
            font-size: 36rpx;
            font-weight: 600;
            margin-bottom: 10rpx;
          }

          text {
            font-size: 24rpx;
            color: rgba(0, 0, 0, 0.5);
          }
        }

        .activityBox_top_title_right {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding-left: 50rpx;
          // padding-right: 20rpx;
          margin-right: 20rpx;
          border-left: 1rpx solid rgba(232, 232, 232, 1);

          image {
            width: 44rpx;
            height: 44rpx;
            margin-bottom: 16rpx;
          }

          text {
            font-size: 24rpx;
            color: rgba(61, 61, 61, 1);
          }
        }
      }

      .activityBox_top_content {}
    }

    .activityBox_center {
      border-top: 8rpx solid rgba(240, 240, 240, 1);
      border-bottom: 8rpx solid rgba(240, 240, 240, 1);
    }

    .activityBox_bottom {
      padding: 0 30rpx 0 0;
      background-color: #fff;

      // tab栏样式
      .presentBox_title {
        // margin-top: 32rpx;
        font-size: 24rpx;
        color: rgba(61, 61, 61, .5);
      }

      .presentBox_list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 42rpx 0;

        .presentBox_list_left {
          display: flex;
          align-items: center;

          text {
            font-size: 32rpx;
          }

          image {
            width: 94rpx;
            height: 94rpx;
            border-radius: 50%;
            margin-left: 15rpx;
            margin-right: 18rpx;
          }

          h1 {
            font-size: 30rpx;
            color: rgba(61, 61, 61, 1);
          }
        }
      }

      /deep/.van-tab {
        flex: none;
        color: rgba(61, 61, 61, .5);
        padding: 0 16rpx !important;
      }

      /deep/.van-tabs__line {
        background-color: rgba(253, 211, 56, 1);
        left: -1rpx !important;
      }

      /deep/.van-tab--active {
        font-weight: 600;
        color: rgba(61, 61, 61, 1);
      }
    }

    .suspend {
      width: 100%;
      height: 128rpx;
      box-sizing: border-box;
      position: fixed;
      left: 50%;
      bottom: 0;
      transform: translate(-50%);
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      padding: 0 30rpx;
      z-index: 1;
      box-shadow: 0 -6rpx 20rpx 0 rgba(0, 0, 0, 0.02);

      .text {
        color: rgba(61, 61, 61, 0.8);
        border-left: 6rpx solid rgba(61, 61, 61, 0.5);
        padding-left: 20rpx;
        width: 50%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      button {
        width: 250rpx;
        height: 70rpx;
        text-align: center;
        line-height: 70rpx;
        border-radius: 44rpx;
        font-size: 32rpx;
      }

      .award {
        border: 2rpx solid rgba(61, 61, 61, .1);
        background-color: #fff;
        margin: 0 !important;
      }

      .participation {
        margin: 0 !important;
        background-color: #FDD338;
      }
    }

  }

  .share_Input {
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;

    button {
      background-color: #fff;
      padding: 0 !important;
      // border-radius: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      image {
        width: 110rpx;
        height: 110rpx;
      }

      text {
        font-size: 32rpx;
      }
    }
  }

  .circleType {
    /deep/ .van-popup--center {
      position: fixed !important;
      top: 7% !important;
      left: 77% !important;
    }

    /deep/ .van-popup {
      border-radius: 6rpx;
    }

    .share_Input {
      font-size: 26rpx;
      padding: 0 24rpx;
      line-height: 50rpx;
    }

    .minImage {
      position: absolute;
      right: 96rpx;
      top: -38rpx;
      width: 0;
      height: 0;
      overflow: hidden;
      font-size: 0;
      /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
      line-height: 0;
      /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
      border-width: 10px;
      border-style: solid dashed dashed dashed;
      /*IE6下, 设置余下三条边的border-style为dashed,即可达到透明的效果*/
      border-color: transparent transparent #fff transparent;
    }
  }

  .tab_padding1 {
    display: flex;
    flex-wrap: wrap;

    .tab_padding_box {
      width: 25%;
      height: 180rpx;
      // background-color: #000000;
      display: flex;
      flex-direction: column;
      align-items: center;

      image {
        width: 94rpx;
        height: 94rpx;
        border-radius: 50%;
      }

      .nickname {
        display: block;
        margin-top: 10px;
        margin-bottom: 10px;
        color: #b1b5b4;
        font-size: 14px;
      }
    }
  }
</style>
